<template>
  <div class="container">
    <!-- 导航 -->
    <div class="nav">
      <h1>起点中文网</h1>
      <div class="sex">
        <p>男生</p>
        <router-link tag="p" to="/girl">女生</router-link>
      </div>
      <div class="img">
        <router-link
          tag="span"
          to="/userinfo"
          class="iconfont icon-weidenglu-touxiang"
        ></router-link>
        <router-link
          tag="span"
          to="/bookshif"
          class="iconfont icon-shujia"
        ></router-link>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="bannerbox">
      <div class="swiper">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @change="onChange"
        >
          <router-link
            tag="van-swipe-item"
            :to="'/details?id=' + item.id"
            v-for="item in bannerbox_img"
            :key="item.id"
          >
            <img :src="item.img" alt="" />
          </router-link>
          <template #indicator>
            <div class="custom-indicator">
              <ul>
                <li
                  v-for="num in bannerbox_img.length"
                  :key="num"
                  :class="{ con: indexSwiper == num - 1 }"
                ></li>
              </ul>
            </div>
          </template>
        </van-swipe>
      </div>
    </div>

    <!-- 搜索 -->
    <router-link tag="div" to="/search" class="global_search">
      <div class="search_box">
        <span class="iconfont icon-sousuo"></span>
        <span>消费系男神</span>
      </div>
    </router-link>

    <!-- 跳转页面 -->
    <div class="home-nav">
      <ul>
        <router-link
          tag="li"
          v-for="item in home_nav_lists"
          :key="item.id"
          :to="'/page' + item.id"
        >
          <a>
            <img :src="item.img" alt="" />
            <p>{{ item.title }}</p>
          </a>
        </router-link>
      </ul>
    </div>

    <!-- 新书强推 -->
    <div class="home-btn-line-x">
      <p>新书强推</p>
      <p>三江·网文新风</p>
    </div>

    <!-- 畅销精选 -->
    <div class="module">
      <div class="module-header">
        <div class="left">畅销精选</div>
        <div class="right">
          更多 <span class="iconfont icon-dayuhao"></span>
        </div>
      </div>
      <router-link
        tag="div"
        :to="'/details?id=' + item.id"
        class="book"
        v-for="item in book_lists"
        :key="item.id"
      >
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="text">
          <h4>{{ item.name }}</h4>
          <p>
            {{ item.brief }}
          </p>
          <div class="bottom">
            <div class="text_left">{{ item.type }} · {{ item.number }}</div>
            <div class="text_right">
              <p>{{ item.label_one }}</p>
              <p>{{ item.label_two }}</p>
            </div>
          </div>
        </div>
      </router-link>
    </div>

    <!-- 猜你喜欢 -->
    <div class="module">
      <div class="module-header">
        <div class="left">
          猜你喜欢
          <span>根据你的阅读口味智能推荐</span>
        </div>
      </div>
      <router-link
        tag="div"
        :to="'/details?id=' + item.id"
        class="module_content"
        v-for="item in module_content_lists"
        :key="item.id"
      >
        <h1>你可能感兴趣的好书</h1>
        <div class="book">
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="text">
            <h4>{{ item.name }}</h4>
            <p>
              {{ item.brief }}
            </p>
            <div class="bottom">
              <div class="text_left">{{ item.type }} · {{ item.wordage }}</div>
            </div>
          </div>
        </div>
      </router-link>
      <div class="move" @click="random">
        <div class="img">
          <span class="iconfont icon-xuanzhuan"></span>
        </div>
        <p>换一批</p>
      </div>
    </div>

    <!-- 限时免费 -->
    <div class="module">
      <div class="module-header">
        <div class="left">
          限时免费
          <span class="time">{{ time_one }}</span
          >: <span class="time">{{ time_two }}</span
          >: <span class="time">{{ time_three }}</span
          >:
          <span class="time">{{ time_four }}</span>
        </div>
        <div class="right">
          更多 <span class="iconfont icon-dayuhao"></span>
        </div>
      </div>
      <div class="list">
        <div class="content">
          <van-swipe :loop="false" :width="82" :show-indicators="false">
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="item in limit_book_lists"
              :key="item.id"
            >
              <div class="item">
                <div class="img">
                  <img :src="item.img" alt="" />
                  <em>限免</em>
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.author }}</p>
                </div>
              </div>
            </router-link>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="module ranking module_ranking">
      <div class="module-header">
        <div class="left">排行榜</div>
        <div class="right">
          更多 <span class="iconfont icon-dayuhao"></span>
        </div>
      </div>
      <div class="moduleTab">
        <ul>
          <li>畅销榜</li>
          <li>风云榜</li>
          <li>签约榜</li>
          <li>推荐榜</li>
        </ul>
      </div>
      <div class="list">
        <div class="content">
          <van-swipe :loop="false" :width="82" :show-indicators="false">
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="(item, index) in ranking_lists"
              :key="item.id"
            >
              <div class="item">
                <div class="img">
                  <img :src="item.img" alt="" />
                  <em>top{{ index + 1 }}</em>
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.author }}</p>
                </div>
              </div>
            </router-link>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 分类推荐 -->
    <div class="module ranking sort">
      <div class="module-header">
        <div class="left">
          分类推荐
          <span>频道主编推荐</span>
        </div>
        <div class="right">
          更多 <span class="iconfont icon-dayuhao"></span>
        </div>
      </div>
      <div class="moduleTab">
        <ul>
          <li class="con">玄幻奇幻</li>
          <li>武侠仙侠</li>
          <li>都市职场</li>
        </ul>
      </div>
      <div class="list">
        <div class="content">
          <van-swipe :loop="false" :width="82" :show-indicators="false">
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="item in sort_lists"
              :key="item.id"
            >
              <div class="item">
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.author }}</p>
                </div>
              </div>
            </router-link>
          </van-swipe>
        </div>
      </div>
      <div class="moduleTab change">
        <ul>
          <li class="con">历史军事</li>
          <li>游戏体育</li>
          <li>科幻悬疑</li>
        </ul>
      </div>
      <div class="list">
        <div class="content">
          <van-swipe :loop="false" :width="82" :show-indicators="false">
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="item in limit_book_lists"
              :key="item.id"
            >
              <div class="item">
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.author }}</p>
                </div>
              </div>
            </router-link>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 照片 -->
    <div class="home-pure-ad">
      <img
        src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/4ebf0592109ae5c61d5cfd90f70b99ff.jpg"
        alt=""
      />
    </div>

    <!-- 轻小说 -->
    <div class="module ranking sort">
      <div class="module-header">
        <div class="left">轻小说</div>
        <div class="right">
          更多 <span class="iconfont icon-dayuhao"></span>
        </div>
      </div>
      <div class="list">
        <div class="content">
          <van-swipe :loop="false" :width="82" :show-indicators="false">
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="item in limit_book_lists"
              :key="item.id"
            >
              <div class="item">
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.author }}</p>
                </div>
              </div>
            </router-link>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 精选专题 -->
    <div class="module selected">
      <div class="module-header">
        <div class="left">精选专题</div>
      </div>
      <div class="img">
        <img
          src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/6fa21f1905dd0ed8ddad52102d37e28e.jpeg"
          alt=""
        />
        <img
          src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/8ec38ff3b3c2baf9a4fa520faa4a3543.jpg"
          alt=""
        />
      </div>
      <div class="img">
        <img
          src="https://qidian.qpic.cn/qidian_common/349573/196e3d3bec0baee4ea0dcb40ddce2bb3/0"
          alt=""
        />
        <img
          src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/efd00da9241b72d53d5e360583571e0d.jpg"
          alt=""
        />
      </div>
      <div class="text" v-show="flag">
        <p>登录后获得更多特色功能·</p>
        <router-link tag="p" to="/userinfo">立即登录</router-link>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer-link">
      <div class="top">
        <p>QQ阅读</p>
        <p>红袖添香</p>
      </div>
      <div class="among">
        <p>客户端</p>
        <p>触屏版</p>
        <p>帮助与客服</p>
        <p>搜索</p>
      </div>
      <div class="footer-copy">
        <p>网站备案/许可证号：沪B2-20080046-1</p>
        <p>互联网宗教信息服务许可证 编号：沪（2022）0000022</p>
        <p>沪B2-20080046-1</p>
      </div>
    </div>
    <!-- 固定 -->
    <div class="fixed">
      <div class="bottom-left">书城精选</div>
      <div class="bottom-middle">
        <img
          src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/510a36b35ce8c3265e6f909f4ab52c2d.png"
          alt=""
        />
      </div>
      <div class="bottom-right">下载起点读书</div>
    </div>

    <!-- 最近阅读 -->
    <van-cell @click="showPopup"
      ><div class="fixed_two">最近阅读</div></van-cell
    >
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '330px', color: 'black' }"
    >
      <div class="recent">
        <div class="title">
          <p>最近阅读</p>
        </div>
        <router-link
          tag="div"
          :to="'/details?id=' + item.id"
          class="recent_book"
          v-for="item in recent_book"
          :key="item.id"
        >
          <div class="book-title">
            <p>{{ item.name }}</p>
            <p>继续阅读<span class="iconfont icon-qianjin"></span></p>
          </div>
          <div class="book-meta">
            {{ item.meta }}
          </div>
          <div class="book_time">
            {{ item.time }}
          </div>
        </router-link>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getRankingData, getbook_dataData } from "../api/home.js";
export default {
  data() {
    return {
      indexSwiper: 0,
      bannerbox_img: [
        {
          id: 1207,
          img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/39cea9a49d505ab02acc308655f2b9cc.jpg",
        },
        {
          id: 1208,
          img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/1ce6f98adcc0894d2ddb126e303b91fa.jpg",
        },
        {
          id: 1209,
          img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/5355fd01a9f9fc008ad9710b7f14ea6f.jpg",
        },
        {
          id: 1210,
          img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/43cf6b1559690073772bda8ea4724f93.jpg",
        },
      ],
      home_nav_lists: [
        {
          id: 1,
          img: "https://qidian.gtimg.com/qdm/img/sort.3c6e2.png",
          title: "分类",
        },
        {
          id: 2,
          img: "https://qidian.gtimg.com/qdm/img/rank.7f3ea.png",
          title: "排行榜",
        },
        {
          id: 3,
          img: "https://qidian.gtimg.com/qdm/img/free.80453.png",
          title: "免费",
        },
        {
          id: 4,
          img: "https://qidian.gtimg.com/qdm/img/end.08eac.png",
          title: "完本",
        },
        {
          id: 5,
          img: "https://qidian.gtimg.com/qdm/img/god.f39ac.png",
          title: "大神",
        },
      ],
      book_lists: [
        {
          id: 1211,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1034753010/150",
          name: "超维杀",
          brief: "穿越成了植物人怎么办不要慌，先开把游戏冷静一下……",
          type: "科幻",
          number: "754万字",
          label_one: "原创副本",
          label_two: "穿越",
        },
        {
          id: 1212,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033280337/150",
          name: "我在天师府苟到无敌",
          brief:
            "周玄重生成了大夏仙朝天师府鉴魔司里的一名鉴魔役，开局获得六道宝鉴，可以通过清算妖邪死后不散的因果，不断获取各种奖励。洗髓宝术“紫气东来”、太一经、元屠阿鼻、涅槃道果、千年蟠桃……恰逢三界动乱，妖魔",
          type: "仙侠",
          number: "113万字",
          label_one: "签到",
          label_two: "杀伐果断",
        },
        {
          id: 1213,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1034894174/150",
          name: "大明1805",
          brief:
            "大明泰平三十四年元月五日，西历公元1805年2月4日，今日立春，天气阴转晴。拿破仑就任法、普、露三国亚洲陆军部队统帅，剑指伊犁河谷》。《纳尔逊率领英、法两国联合舰队抵达印度洋，威胁马六甲海峡》。",
          type: "历史",
          number: "40万字",
          label_one: "架空历史",
          label_two: "明朝",
        },
      ],
      module_content_lists: [
        {
          id: 1214,
          name: "我用闲书成圣人",
          img: "https://bookcover.yuewen.com/qdbimg/349573/1028463573/150",
          brief: "致【玩家】：这是生命的奥秘，是万物的征途。",
          type: "仙侠",
          wordage: "313万字",
        },
        {
          id: 1215,
          name: "黜龙",
          img: "https://bookcover.yuewen.com/qdbimg/349573/1031516087/150",
          brief:
            "此方天地有龙。龙形百态，不一而足，或游于江海，或翔于高山，或藏于九幽，或腾于云间。",
          type: "历史",
          wordage: "156万字",
        },
        {
          id: 1216,
          name: "序列玩家",
          img: "https://bookcover.yuewen.com/qdbimg/349573/1016407584/150",
          brief: "致【玩家】：这是生命的奥秘，是万物的征途。",
          type: "悬疑",
          wordage: "291万字",
        },
      ],
      limit_book_lists: [
        {
          id: 1217,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1034390229/150",
          name: "美剧人生从豪斯医生开始",
          author: "阿拉米格",
        },
        {
          id: 1218,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033055770/150",
          name: "精灵：我真打不过宝可梦啊",
          author: "乘风览月",
        },
        {
          id: 1219,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033886237/150",
          name: "开局获得时间禁止，进入聊天群",
          author: "五爪的鱼",
        },
        {
          id: 1220,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033826716/150",
          name: "重生东京，开错外挂",
          author: "前有绝景",
        },
        {
          id: 1221,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033343871/150",
          name: "亿人聊天群",
          author: "超人坐家",
        },
        {
          id: 1222,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1034019729/150",
          name: "新吕布战纪. 限时免费",
          author: "强中更有强",
        },
        {
          id: 1223,
          img: "https://bookcover.yuewen.com/qdbimg/349573/1033343871/150",
          name: "亿人聊天群",
          author: "超人坐家",
        },
      ],
      ranking_lists: null,
      account_num: null,
      flag: true,
      sort_lists: null,
      show: false,
      recent_book: null,
      sum_book: null,
      judge: null,
      time_one: null,
      time_two: null,
      time_three: null,
      time_four: null,
    };
  },
  methods: {
    onChange(index) {
      this.indexSwiper = index;
    },
    account() {
      this.account_num = window.localStorage.getItem("token");
      if (this.account_num) {
        this.flag = false;
      } else {
        this.flag = true;
      }
      setInterval(() => {
        let startDate = new Date();
        let endDate = new Date("2022/10/30 00:0:0");
        let t = endDate.getTime() - startDate.getTime();
        let d = 0,
          h = 0,
          m = 0,
          s = 0;
        if (t >= 0) {
          d = Math.floor(t / 1000 / 3600 / 24);
          h = Math.floor((t / 1000 / 60 / 60) % 24);
          m = Math.floor((t / 1000 / 60) % 60);
          s = Math.floor((t / 1000) % 60);
        }
        this.time_one = d < 10 ? "0" + d : d;
        this.time_two = h < 10 ? "0" + h : h;
        this.time_three = m < 10 ? "0" + m : m;
        this.time_four = s < 10 ? "0" + s : s;
      }, 500);
    },
    showPopup() {
      this.show = true;
    },
    random() {
      this.module_content_lists = [];
      for (let i = 0; i < 3; i++) {
        let a = Math.ceil(Math.random() * this.sum_book.length);
        this.judge = this.module_content_lists.every((item) => {
          return item.id != this.sum_book[a].id;
        });
        if (this.judge && this.module_content_lists.length < 3) {
          this.module_content_lists.push({
            id: this.sum_book[a].id,
            name: this.sum_book[a].name,
            img: this.sum_book[a].img,
            brief: this.sum_book[a].brief,
            type: this.sum_book[a].type,
            wordage: this.sum_book[a].wordage,
          });
        }
      }
    },
  },
  created() {
    this.account();
    getRankingData().then((data) => {
      // console.log(data.recent_book);
      this.ranking_lists = data.data;
      this.sort_lists = data.sort;
      this.recent_book = data.recent_book;
    });
    getbook_dataData().then((data) => {
      // console.log(data.data);
      this.sum_book = data.data;
      console.log(this.sum_book);
    });
  },
};
</script>

<style lang="scss" scoped>
// 最近阅读
.van-popup {
  .recent {
    .title {
      text-align: center;
      p {
        padding: 15px;
      }
    }
    .recent_book {
      padding: 15px;
      padding-left: 0;
      margin-left: 15px;
      border-bottom: 1px solid #cfcfd0;
      .book-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          &:nth-child(1) {
            font-weight: 600;
            font-size: 18px;
          }
          &:nth-child(2) {
            font-size: 14px;
            color: #969ba3;
          }
        }
      }
      .book-meta,
      .book_time {
        color: #969ba3;
        font-size: 14px;
        padding: 2px 0;
      }
    }
  }
}

// 轻小说

// 照片
.home-pure-ad {
  padding: 0 15px 12px 15px;
  img {
    width: 100%;
  }
}

// 分类推荐
.ranking {
  .item {
    .img {
      em {
        background-color: #ed424b;
        color: #fff;
      }
    }
  }
}

.moduleTab {
  margin-bottom: 12px;
  ul {
    display: flex;
    border: 1px solid #ed424b;
    border-radius: 4px;
    li {
      width: 33.3%;
      text-align: center;
      color: #ed424b;
      height: 27px;
      line-height: 27px;
      font-size: 14px;
      &.con {
        background-color: #ed424b;
        color: #fff;
      }
    }
  }
}
.moduleTab ul li:nth-child(2),
.moduleTab ul li:nth-child(3) {
  border-right: 1px solid #ed424b;
}

// 限时免费
.module {
  .module-header {
    align-items: center;
    .left {
      & > .time {
        margin-left: 0;
        border-radius: 3px;
        background-color: #33373d;
        color: #ffffff;
        &:nth-child(1) {
          background-color: #ed424b;
          color: #faf3ff;
        }
      }
    }
  }
  .list {
    padding-bottom: 16px;
    .content {
      .van-swipe {
        .van-swipe-item {
          // width: 100%;
          // margin-right: 16px;
          .item {
            .img {
              width: 66px;
              height: 88px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              em {
                position: absolute;
                left: 0;
                top: 7px;
                font-size: 10px;
                line-height: 11px;
                font-style: normal;
                background-color: #4284ed;
                color: #fff;
                transform: rotate(-45deg);
              }
            }
            .text {
              width: 100%;
              line-height: 16px;
              font-size: 12px;
              color: #33373d;
              p {
                &:nth-child(1) {
                  margin: 6px 0;
                  height: 32px;
                  overflow: hidden;
                }
                &:nth-child(2) {
                  font-size: 13px;
                  color: #969ba3;
                }
              }
            }
          }
        }
      }
    }
  }
}

.container {
  background-color: #f6f7f9;
}
// 导航
.nav {
  display: flex;
  padding: 9px 12px;
  justify-content: space-between;
  background-color: #fff;
  h1 {
    height: 26px;
    line-height: 26px;
    font-size: 18px;
    color: #ee2737;
    font-weight: bold;
  }
  .sex {
    display: flex;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ed424b;
    p {
      &:nth-child(1) {
        padding: 0 12px;
        background-color: #ed424b;
        font-size: 12px;
        color: #fff;
      }
      &:nth-child(2) {
        padding: 0 12px;
        background-color: #fff;
        font-size: 12px;
        color: #ed424b;
      }
    }
  }
  .img {
    display: flex;
    justify-content: space-between;
    align-content: center;
    .iconfont {
      font-size: 22px;
    }
    span:nth-child(1) {
      margin-right: 12px;
      margin-top: 1px;
    }
  }
}
// 照片轮播图妖轮播图
.bannerbox {
  background-color: #f6f7f9;
  padding: 0px 12px;
  .swiper {
    overflow: hidden;
    img {
      width: 100%;
    }
    .custom-indicator {
      width: 100%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      text-align: center;
      ul {
        display: inline-block;
        margin: 0 auto;
        li {
          display: inline-block;
          width: 4px;
          height: 4px;
          margin: 4px 2px;
          background-color: rgba(255, 255, 255, 0.6);
          border-radius: 50%;
          &.con {
            background-color: red;
          }
        }
      }
    }
  }
}
//搜索
.global_search {
  background-color: #f6f7f9;
  padding: 0px 12px;
  display: flex;
  .search_box {
    display: flex;
    background-color: #fff;
    width: 100%;
    justify-content: center;
    border-radius: 4px;
    margin: 6px 0;
    span {
      height: 32px;
      line-height: 32px;
      color: #969ba3;
      font-size: 14px;
      text-indent: 0.4em;
    }
  }
}
// 跳转页面
.home-nav {
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    padding: 18px 0;
    li {
      a {
        img {
          margin: 0 auto;
          width: 26px;
          height: 26px;
        }
        p {
          font-size: 12px;
          color: #33373d;
          margin-top: 9px;
        }
      }
    }
  }
}

// 新书强推
.home-btn-line-x {
  padding: 16px;
  background-color: #f6f7f9;
  display: flex;
  justify-content: center;
  p {
    height: 27px;
    line-height: 27px;
    font-size: 14px;
    color: #ed424b;
    border: 1px solid #ed424b;
    width: 45%;
    text-align: center;
    border-radius: 13px;
    &:nth-child(1) {
      margin-right: 18px;
    }
  }
}

// 畅销精选
.module {
  padding: 0 16px;
  margin-bottom: 11px;
  background-color: #fff;
  .book {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f1f2;
    margin-top: 10px;
    img {
      width: 66px;
      height: 88px;
    }
    .text {
      margin-left: 6px;
      h4 {
        height: 22px;
        line-height: 22px;
        color: #33373d;
        font-weight: bold;
      }
      & > p {
        font-size: 14px;
        color: #969ba3;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 6px;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
        .text_left {
          display: flex;
          font-size: 14px;
          color: #969ba3;
        }
        .text_right {
          display: flex;
          color: #adadad;
          font-size: 12px;
          margin-top: 1px;
          & > p {
            height: 18px;
            line-height: 18px;
            padding: 0 4px;
            background-color: #f5f5f5;
            border-radius: 3px;
            &:nth-child(1) {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}
.module-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 10px 0;
  .left {
    font-size: 16px;
    border-left: 2px solid #ed424b;
    padding: 0 8px;
    font-weight: 500;
    color: #33373d;
    font-weight: bold;
  }
  .right {
    font-size: 14px;
    color: #969ba3;
  }
}

// 猜你喜欢
.module {
  .module-header {
    .left {
      & > span {
        font-size: 14px;
        color: #969ba3;
        font-weight: normal;
        margin-left: 10px;
      }
    }
  }
  h1 {
    font-size: 14px;
    color: #969ba3;
    margin-top: 22px;
  }
  .move {
    display: flex;
    justify-content: center;
    padding: 19px 0 16px 0;
    .img {
      width: 16px;
      height: 16px;
      margin-top: 2px;
      span {
        color: #5790df;
      }
    }
    p {
      font-style: 14px;
      color: #5790df;
    }
  }
}

// 排行榜
.module_ranking .item .img em {
  background-color: #ed424b;
  color: #fff;
}

.module_ranking .moduleTab {
  margin-bottom: 12px;
}

.module_ranking .moduleTab ul {
  display: flex;
  border: 1px solid #ed424b;
  border-radius: 4px;
}

.module_ranking .moduleTab ul li {
  width: 25%;
  text-align: center;
  color: #ed424b;
  height: 27px;
  line-height: 27px;
  font-size: 14px;
}

.module_ranking .moduleTab ul li:nth-child(1) {
  background-color: #ed424b;
  color: #fff;
}

.module_ranking .moduleTab ul li:nth-child(2),
.module_ranking .moduleTab ul li:nth-child(3) {
  border-right: 1px solid #ed424b;
}

.module_ranking {
  .list {
    .content {
      .van-swipe {
        .van-swipe-item {
          .item {
            .img {
              em {
                background-color: #ed424b;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

// 精选专题
.selected {
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f1f2;
  margin-bottom: 0;
  .img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    img {
      width: 48%;
    }
  }
  .text {
    display: flex;
    justify-content: center;
    margin-top: 38px;
    font-size: 14px;
    p {
      &:nth-child(2) {
        color: #4284ed;
      }
    }
  }
}
// 底部
.footer-link {
  background-color: #fff;
  padding-top: 22px;
  padding-bottom: 64px;
  .top {
    p {
      width: 50%;
      text-align: center;
      font-size: 14px;
      color: #969ba3;
    }
  }
  .among {
    margin-top: 34px;
    p {
      width: 25%;
      text-align: center;
      font-size: 14px;
      color: #969ba3;
    }
  }
  .footer-copy {
    text-align: center;
    font-size: 12px;
    color: #969ba3;
    margin-top: 20px;
  }
}
.footer-link .top,
.footer-link .among {
  display: flex;
}

// 固定
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  width: 100%;
  height: 48px;
  box-shadow: 0 0 16px rgb(0 0 0 / 10%);
  justify-content: space-between;
}

.fixed .bottom-left,
.fixed .bottom-middle,
.fixed .bottom-right {
  width: 33%;
  text-align: center;
}

.fixed .bottom-left {
  line-height: 48px;
  font-size: 15px;
  color: #e5353e;
}

.fixed .bottom-middle img {
  width: 100%;
}

.fixed .bottom-right {
  line-height: 48px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(270deg, #fa646d 0, #fa323e 100%);
}

.fixed_two {
  position: fixed;
  bottom: 105px;
  right: 15px;
  width: 34px;
  background-color: #ed424b;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  height: 34px;
  padding: 4px;
}

.van-cell {
  line-height: 18px;
  padding: 0;
}
</style>
